<template>
  <el-upload
    ref="upload"
    :name="name"
    :action="action"
    :limit="limit"
    :accept="accept"
    :multiple="multiple"
    list-type="picture-card"
    :auto-upload="true"
    :on-exceed="onExceed"
    :on-change="onChange"
    :on-error="onError"
    :on-success="onSuccess"
    :on-remove="onRemove"
    :file-list="fileList"
  >
    <i slot="default" class="el-icon-plus" />
    <div slot="file" slot-scope="{file}">
      <img class="el-upload-list__item-thumbnail" :src="file.url" alt>

      <span class="el-upload-list__item-actions">
        <!-- pictureCard preview -->
        <span
          v-if="!previewDisabled"
          class="el-upload-list__item-preview"
          @click="pictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in" />
        </span>

        <!-- pictureCard remove -->
        <span
          v-if="!removeDisabled"
          class="el-upload-list__item-delete"
          @click="remove(file)"
        >
          <i class="el-icon-delete" />
        </span>
      </span>
    </div>
  </el-upload>
</template>

<script>
export default {
  name: 'PictureCard',
  props: {
    // 上传的文件字段名
    name: {
      required: true,
      type: String,
      default() {
        return 'upload'
      }
    },
    // 必选参数，上传的地址
    action: {
      required: true,
      type: String,
      default() {
        return 'http://www.xxx.com'
      }
    },
    // 最大上传数
    limit: {
      type: Number,
      default() {
        return 1
      }
    },
    // 上传的文件字段名
    multiple: {
      type: Boolean,
      default() {
        return true
      }
    },
    // 允许上传的类型
    accept: {
      type: String,
      default() {
        return 'image/jpg, image/jpeg, image/png, image/gif'
      }
    },
    // 是否现实预览按钮
    previewDisabled: {
      type: Boolean,
      default() {
        return false
      }
    },
    // 是否展示删除按钮
    removeDisabled: {
      type: Boolean,
      default() {
        return false
      }
    },
    // 是否隐藏
    hidden: {
      type: Boolean,
      default: false
    },
    // 上传的文件字段名
    fileList: {
      type: Array,
      default: function() {
        return [{ 'name': '', 'url': '' }]
      }
    }
  },
  methods: {
    // 文件超出个数限制时的钩子
    onExceed(file, fileList) {
      this.$notify({
        title: 'Info',
        message: '超出允许上传数量！',
        type: 'info',
        duration: 2000
      })
    },
    onChange(file, fileList) {
      this.$emit('handlePictureCardOnChange', file, fileList)
    },
    onError(errors, file, fileList) {
      this.$message({
        type: 'error',
        message: 'Delete error!'
      })
    },
    onSuccess(response, file, fileList) {
      this.$notify({
        title: 'Tips',
        message: '上传成功！',
        type: 'success',
        duration: 2000
      })
      this.$emit('handlePictureSuccessUpload', response, file, fileList)
    },
    onRemove() {
      console.log('on-remove')
    },
    // 删除上传图片节点
    remove(file) {
      var lists = this.$refs.upload.uploadFiles
      var index = lists.findIndex(item => {
        return item.uid === file.uid
      })
      lists.splice(index, 1)
      this.$emit('handleRemove', file)
    },
    // 图版预览
    pictureCardPreview(file) {
      this.$emit('handlePictureCardPreview', file)
    }
  }
}
</script>
